<template>
	<view class="p-20 border-bottom border-info animate__animated animate__fadeInLeft animate__fast">
		<view class="flex-row j-sb a-center">
			<view class="row-center text-color3">
				<image class="img-header mr-10 u-skeleton-circle" :src="info.userPic" mode="widthFix" lazy-load></image>{{info.username}}
			</view>
			<view class="row-center bg-info-light rounded-10 px-10 u-skeleton-rect">
				<template v-if="info.isFollow">
					已关注
				</template>
				<template v-else>
					<view @click="follow">
						<text class="iconfont iconjia mr-10"></text>关注
					</view>
				</template>
			</view>
		</view>
		<view class="w-100 line-1 font-lg" @click="goDetail">{{info.title}}</view>
		<view class="position-relative row-center u-skeleton-fillet">
			<!-- 图片 -->
			<image class="w-100 rounded-20" :src="info.coverPic" mode="widthFix" lazy-load @click="goDetail"></image>
			<template v-if="info.type === 'video'">
				<!-- 视频 -->
				<view class="icon-play iconfont iconbofang"></view>
				<view class="play-info">
					{{info.playNum}}次播放 {{info.playLong}}
				</view>
			</template>
		</view>
		<view class="flex-row j-sb a-center text-color3">
			<view class="row-center u-skeleton-rect">
				<view class="row-center mr-20" @click="changeIcon('smile')">
					<view class="iconfont mr-10" :class="handleIcon('smile',info.infoNum.index)"></view>
					{{info.infoNum.smileNum}}
				</view>
				<view class="row-center" @click="changeIcon('cry')">
					<view class="iconfont mr-10" :class="handleIcon('cry',info.infoNum.index)"></view>
					{{info.infoNum.cryNum}}
				</view>
			</view>
			<view class="row-center u-skeleton-rect">
				<view class="row-center mr-20">
					<view class="iconfont iconliaotian mr-10"></view>
					{{info.commentNum}}
				</view>
				<view class="row-center">
					<view class="iconfont iconfenxiang mr-10"></view>
					{{info.shareNum}}
				</view>
			</view>
		</view>
		<!-- 轻提示 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	/*
	 * contentList 内容列表
	 * @description 用于首页图文列表信息
	 * @author MrThinco
	 * @property {Object} item 列表信息
	 */
	export default {
		props:{
			item: Object
		},
		data() {
			return {
				info: this.item, // 定义一个变量接收父组件传值，避免直接修改父组件值
			}
		},
		methods: {
			// 关注
			follow() {
				this.info.isFollow = true;
				this.$refs.uToast.show({
					title: '您关注成功',
					position: 'top',
					type: 'success',
					icon: true,
					url:''
				});
			},
			// 表情处理
			handleIcon(type,index) {
				if (type === 'smile') {
					if (index === 1) {
						return 'active iconicon_xiaolian-mian';
					} else {
						return 'iconsmiling';
					}
				} else {
					if (index === 2) {
						return 'active iconkulian';
					} else {
						return 'iconshibaixiaolian';
					}
				}
			},
			// 操作表情
			changeIcon(type) {
				switch(type) {
					case 'smile':
						if(this.info.infoNum.index == 1) { 
							return;
						} else if(this.info.infoNum.index == 2) {
							this.info.infoNum.cryNum--;
						}
						this.info.infoNum.index = 1;
						this.info.infoNum.smileNum++;
						break;
					case 'cry':
						if(this.info.infoNum.index == 2) {
							return;
						} else if(this.info.infoNum.index == 1) {
							this.info.infoNum.smileNum--;
						}
						this.info.infoNum.index = 2;
						this.info.infoNum.cryNum++;
						break;
				}
			},
			// 进入详情页
			goDetail() {
				console.log('进入详情页');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.img-header {
		width: 100rpx;
		height: 100rpx;
		border-radius: 100%;
	}
	.icon-play {
		position: absolute;
		font-size: 120rpx;
		color: #FFF;
	}
	.play-info {
		position: absolute;
		right: 10rpx;
		bottom: 10rpx;
		color: #FFF;
		background-color: rgba(153, 153, 153, 0.75);
		border-radius: 50rpx;
		padding: 0px 20rpx;
		font-size: 25;
	}
	.active {
		color: #19be6b;
		view {
			color: #19be6b;
		}
	}
</style>
